<!--
* @FileDescription: 瓦斯自定义显示
* @Author: yuec621@outlook.com
* @Date: 2025-06-24 10:48:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-06-25 08:38:35
-->
<template>
    <div class="pagestyle" style="overflow-y:auto">
        <div class="indexBox h100" >
            <el-row :gutter="20" class="h100">
                <el-col :span="4">
                    <div class="cardBox">
                        <h2>
                            <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>抽采点选择</span>
                        </h2>
                        <el-checkbox-group v-model="state.checkboxGroup" @change="checkboxGroupChange">
                            <el-checkbox v-for="item in state.dataList" class="w100" :label="item.samplePointName"
                                :value="item.id" border />
                        </el-checkbox-group>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="cardBox" style="position: relative;">
                        <h2>
                            <span>实时抽采信息</span>
                        </h2>
                        <div style="display: flex;justify-content: space-between;">
                            <div class="listBox" v-for="(item,index) in state.rightList">
                                <div class="titleBox">
                                    <div>
                                        <p>
                                            <span class="state">{{item.pipeType}}</span><span
                                                class="title">{{item.samplePointName}}</span>
                                        </p>
                                        <p class="subtitle">{{item.samplePointLocation}}</p>
                                    </div>
                                    <div>
                                        <svg-icon class="hover" class-name="search-icon" 
                                        icon-class="tubiaoneiguanbi" @click="guanbiClick(item,index)" />
                                    </div>
                                </div>
                                <div class="listInfo" v-for="itemsub in item.pumpNodeList">
                                    <div class="infotop">
                                        <span class="title" style="width: 57%;"> <span v-if="itemsub.pointId!=null">
                                            【{{itemsub.pointId}}】</span> {{itemsub.sensorName}}</span>
                                            <span
                                            v-if="itemsub.faultType!=null"
                                            class="baojingIcon"><img src="@/assets/images/报警.svg" alt="">
                                            {{itemsub.faultType}}</span><span>监测值</span>
                                    </div>
                                    <div class="subtitle"><span>{{itemsub.place}}</span><span
                                            style="color: rgba(68, 136, 255, 1);">{{ itemsub.pointValueStr }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-if="state.rightList.length>0" 
                            style="display: flex;justify-content: end;position: absolute;bottom: 10px;right: 10px;">
                            <el-pagination style="margin-top: 10px;" v-model:current-page="state.useQueryObj.pageNum"
                                v-model:page-size="state.useQueryObj.pageSize" :page-sizes="[3, 6, 9, 12]" background
                                layout="total, sizes, prev, pager, next, jumper" :total="state.useQueryObj.total"
                                @size-change="pagechangeSize" @current-change="pagechange" />
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup>
    import {
        computed,
        onMounted,
        reactive
    } from "vue";
    import {
        table_headers
    } from "@/components/commonCom/table_headers";
    import axios from "@/utils/request";
    import usePagesStore from "@/store/modules/pages";
    import {
        ElMessage,
        ElMessageBox
    } from "element-plus";

    const {
        proxy
    } = getCurrentInstance();
    const store = usePagesStore();
    const router = useRouter();
    const upload = ref(null);

    let state = reactive({
        rightList: [],
        dataList: [],
        useQueryObj: {
            pageNum: 1,
            pageSize: 3,
            total: 0
        },
        checkboxGroup: [],
        modalTitle: '新增',
        addModal: false,
        open_detail: false,
        formData: {},
        rules: {
            workspaceName: [{
                required: true,
                message: '请输入工作面名称',
                trigger: 'blur'
            }]
        },
        descList1: [],
    });

    function currentChangePage(size, current) {
        const tablePush = [];
        let array = JSON.parse(JSON.stringify(state.dataList));
        array.forEach((item, index) => {
            if (size * (current - 1) <= index && index <= size * current - 1) {
                tablePush.push(item);
            }
        });
        return tablePush;
    }


    function pagechangeSize(val) {
        state.useQueryObj.pageNum = 1;
        state.useQueryObj.pageSize = val;
        state.rightList = currentChangePage(val, state.useQueryObj.pageNum);
    }

    function pagechange(val) {
        state.useQueryObj.pageNum = val;
        state.rightList = currentChangePage(state.useQueryObj.pageSize, val);

    }

    function getList() {
        axios.get('/pump/searchAllPumps').then(res => {
            state.dataList = res.data
            state.checkboxGroup = res.data.map(item => {
                return item.samplePointName
            })
            state.useQueryObj.total = res.data.length
            state.rightList = currentChangePage(
                state.useQueryObj.pageSize,
                state.useQueryObj.pageNum
            );
        })
    }

    function checkboxGroupChange(val) {
        let data = []
        if (val.length > 0) {
            state.dataList.forEach(item => {
                val.forEach(itemsub => {
                    if (item.samplePointName == itemsub) {
                        data.push(item)
                    }
                })
            })
        }
        state.rightList = data
    }
    function guanbiClick(item,index){
        let dataarr=[]
        state.checkboxGroup.forEach(itemsub=>{
            if(item.samplePointName!=itemsub){
                dataarr.push(itemsub)
            }
        })
        state.checkboxGroup = dataarr
        state.rightList.splice(index,1)
    }
    onMounted(() => {
        getList()

    })
</script>
<style lang="scss" scoped>
  .pagestyle {
    height: calc(100vh - 150px) !important;
 }
    :deep(.el-checkbox) {
        margin: 5px 0;
        color: rgba(62, 70, 79, 1);
        height: 40px;
        text-align: center;
        width: 100%;

        .el-checkbox__input {
            display: none;
        }

        .el-checkbox__label {
            width: 100%;
            font-size: 16px;
            font-weight: 700;
        }
    }

    .cardBox {
        height: 100%;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: -2px 0px 20px rgba(91, 109, 128, 0.08);
        padding: 8px 16px;


        h2 {
            font-size: 18px;
            font-weight: 700;

            span {
                margin-left: 10px;
            }
        }

        .listBox {
            font-size: 14px;
            flex: 1;

            &:nth-child(2) {
                margin: 0 10px;
            }

            p {
                padding: 0;
                margin: 0;
            }

            .title {
                font-weight: 700;
            }

            .subtitle {
                margin-top: 10px;
            }

            border-radius: 4px;
            background: rgba(255, 255, 255, 0.4);
            border: 1px solid rgba(229, 231, 235, 1);

            .titleBox {

                .state {
                    margin-right: 6px;
                    padding: 4px;
                    border-radius: 4px;
                    background-color: rgba(103, 194, 58, 1);
                    color: #fff;
                }


                background:rgba(68, 136, 255, 0.08);
                padding: 13px 16px;
                display: flex;
                justify-content: space-between;
            }

            .listInfo {
                margin: 10px;
                padding: 12px 16px 12px 16px;
                border-radius: 4px;
                background: rgba(91, 109, 128, 0.04);

                .infotop {
                    display: flex;
                    justify-content: space-between;

                    .baojingIcon {
                        display: flex;
                        align-items: center;
                        color: rgba(255, 153, 0, 1);
                        font-weight: 700;

                        img {
                            margin-right: 10px;
                        }
                    }
                }

                .subtitle {
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }
</style>